<template>
    <show-modal :title="title" :loading="loading" width="600px" @cancel="cancel" @submit="submit">
        <a-form-model ref="form" :model="form" :rules="rules" v-bind="layout">
            <a-form-model-item label="菜单名称" prop="menuName">
                <a-input v-model="form.menuName" placeholder="请输入菜单名称" />
            </a-form-model-item>
            <a-form-model-item label="菜单类型" prop="menuType">
                <a-radio-group :options="menuTypes" v-model="form.menuType" />
            </a-form-model-item>
            <a-form-model-item label="上级菜单" prop="parentId">
                <a-tree-select
                    style="width: 100%"
                    v-model="form.parentId"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    placeholder="请选择上级菜单"
                    allow-clear
                    :replaceFields="replaceFields"
                    :tree-data="treeData"
                >
                </a-tree-select>
            </a-form-model-item>
            
            <a-form-model-item label="菜单图标" prop="icon" v-if="form.menuType!='F'">
                <a-popover v-model="visible" trigger="click">
                    <div slot="content">
                        <a-list style="width: 400px" :grid="{ gutter: 6, column: 6 }" :data-source="localIcon">
                            <a-list-item slot="renderItem" slot-scope="item">
                                <div
                                    class="text-center pointer icon-wrapper"
                                    @click.capture.stop="selectIcon(item, $event)"
                                >
                                    <svg-icon :icon="item" :size="20" class="disabled" />
                                </div>
                            </a-list-item>
                        </a-list>
                    </div>
                    <a-input v-model="form.icon" placeholder="请选择图标">
                        <svg-icon v-if="form.icon" slot="prefix" :icon="form.icon" />
                    </a-input>
                </a-popover>
            </a-form-model-item>
            <!-- <a-form-model-item label="是否显示">
                <a-switch default-checked @change="onChangeShow" />
            </a-form-model-item> -->
            <a-form-model-item label="权限名称" prop="path" v-if="form.menuType!='C'">
                <a-input v-model="form.path" placeholder="请输入权限名称" />
            </a-form-model-item>

            <a-form-model-item label="是否开放租户" prop="isUniq">
                <a-radio-group :options="isSuperTypes" v-model="form.isUniq" />
            </a-form-model-item>
            
            <a-form-model-item label="路径" prop="path" v-if="form.menuType=='C'">
                <a-select showSearch v-model="form.path" placeholder="请选择文件路径">
                    <a-select-option :value="item.value" v-for="(item, index) in routeList" :key="index">
                        {{ item.value }}
                    </a-select-option>
                </a-select>
            </a-form-model-item>
            
            <a-form-model-item label="排序" prop="orderNum">
                <a-input-number class="form_item" type="number" v-model="form.orderNum" />
            </a-form-model-item>
        </a-form-model>
    </show-modal>
</template>

<script>
import { rules } from './rules';
import localIcon from './localIcon';
import {menuTypes,isSuperTypes} from '../dictionary'
import {addInfo,updateInfo} from '@/api/system/menu'
const path = require('path')

export default {
    name: 'MenuInfo',
    props:{
        list:{
            type:Array,
            default:()=>[]
        },
        info:{
            type:Object,
            default:()=>{}
        }
    },
    data() {
        return {
            loading: false,
            title: '菜单信息',
            localIcon,
            rules,
            menuTypes,
            isSuperTypes,
            form: {
                menuName: '',
                menuType:'M',
                parentId:undefined,
                path:undefined,
                icon:'',
                isUniq:'1',
                orderNum:0,
                status:1
            },
            layout: {
                labelCol: { span: 5 },
                wrapperCol: { span: 19 }
            },
            visible: false,
            routeList: [],
            replaceFields:{
                children:'children',
                title:'menuName',
                key:'menuId',
                value: 'menuId' 
            },
            treeData: [
                {
                    menuName: '顶级菜单',
                    menuId: '-1',
                    children: [
                        ...this.list
                    ]
                }
            ]
        };
    },
    created() {
        this.form = {...this.form,...this.info}
        this.findFiles();
    },
    methods: {
        //提交信息
        submit(){
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        this.loading = true;
                        let form = this.form;
                        let res = null
                        if (form.menuId) {
                            //编辑
                            res = await updateInfo(form);
                        } else {
                            //新增addInfo
                            res = await addInfo(form);
                        }
                        let {code} = res;
                        if(code==200){
                            this.$message.success('操作成功!');
                            this.$emit('submit');
                        }
                    } finally {
                        this.loading = false;
                    }
                }
            });
        },
        // 扫描文件
        findFiles() {
            let files = require.context('@/views/', true, /\.vue$/);
            let list = [];
            files.keys().forEach(key => {
                const filePath = path.dirname(key);
                const name = path.basename(key,'.vue');
                if (!key.includes('components')) {
                    list.push({
                        value: filePath.substr(1)+'/'+name
                    });
                }
            });
            this.routeList = list;
        },
        //选择图标
        selectIcon(item, event) {
            this.form.icon = item;
            this.visible = false;
        },
        //切换路由显示隐藏
        onChangeShow(checked) {
            this.isShow = checked;
        },
        //取消
        cancel() {
            this.$emit('cancel');
        }
    }
};
</script>

<style lang="scss" scoped></style>
